<template>
  <selectFarmType @farmtypemessage="getfarmtypemessage">
    <div slot="farmtypemain" class="farmtypemain-view">
      <div class="add-base-box">
        <div class="selected-main-line2">
          <div class="selected-main-line2-but" @click="isshowaddtitle = true;">
            新建大屏
          </div>
        </div>
      </div>
      <div
        v-for="(item, index) in selectList"
        :key="index"
        class="base-box"
        @mouseenter="setid(item.id)"
      >
        <div v-if="nowselectid === item.id" class="selected-main">
          <div class="selected-main-line1">{{ item.name }}</div>
          <div class="selected-main-line2">
            <div class="selected-main-line2-but" @click="editscreenMet()">
              修改大屏
            </div>
          </div>
        </div>
        <div v-else class="base-box-title">{{ item.name }}</div>
      </div>
      <!-- 添加弹框-选择完大屏名称跳转至具体配置 -->
      <div v-if="isshowaddtitle" class="add-screen-dia">
        <div class="top-bar"></div>
        <div class="top-title-line">
          <div class="line-title">新建大屏</div>
          <div class="line-close" @click="allclickmet(0)">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="screen-dia-main">
          <div class="dia-main-inputline">
            <div class="inputline-name">大屏名称</div>
            <input v-model="tempmes.templateName" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">图片选择</div>
            <input
              type="file"
              accept="image/*"
              @change="getFile"
            />
          </div>
        </div>
        <div class="bottom-bar">
          <div class="bottom-bar-cancel" @click="allclickmet(0)">取消</div>
          <div class="bottom-bar-confirm" @click="allclickmet(1)">确认</div>
        </div>
      </div>
    </div>
  </selectFarmType>
</template>
<script>
import selectFarmType from "@/components/selectFarmType/index.vue";
import axios from 'axios';
export default {
  components: { selectFarmType },
  data() {
    return {
      // 当前传过来的数据
      tempmes: {},
      // 大屏图标
      lishifile: "",
      selectList: [],
      nowselectid: 1,
      farmtypemessage: { name: "大田种植", typeid: 1 },
      isshowaddtitle: false
      // addscreentitle: ""
    };
  },
  mounted() {
    this.goback();
  },
  methods: {
    // 获取所有已配置大屏
    getallscreenlist() {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpit/queryInfo'
      axios({
        method: "GET",
        url: requrl,
        headers: {
          "organizationMark": this.tempmes.organizationMark
        }
      }).then(response => {
        let mes = response.data.data
        if (mes) {
          let newlist = {
            id: mes.cockpitCode,
            name: mes.cockpitName
          }
          // console.log(mes)
          this.selectList.push(newlist)
        } else {
          this.$message.error("已配置大屏查询失败或无数据！")
        }
      })
    },
    // 总体点击公用方法
    allclickmet(i) {
      if (i >= 0) {
        if (i === 0) {
          this.isshowaddtitle = false
        }
        if (i === 1) {
          this.isshowaddtitle = false
          // 跳转至具体配置页面，来配置这个新建大屏---修改也一样
          this.addscreenMet()
        }
      } else {
        this.$message.warning("传值错误！")
      }
    },
    // 添加时选择的图片
    getFile(event) {
      const files = event.target.files;
      let filename = files[files.length - 1].name;
      if (filename.lastIndexOf(".") <= 0) {
        return alert("请添加一张图片!");
      }
      const fileReader = new FileReader();
      fileReader.readAsBinaryString(files[files.length - 1]);
      fileReader.addEventListener("load", () => {
        this.lishifile = files[files.length - 1]
      });
    },
    // 添加大屏
    async addscreenMet() {
      let baseurl = this.$zhurl
      let requrl = baseurl + '/cockpit/oneTouch'
      let formData = new FormData();
      formData.append('file', this.lishifile)
      formData.append('cockpitName', this.tempmes.templateName)
      formData.append('showType', this.tempmes.showType)
      formData.append('templateCode', this.tempmes.templateCode)
      formData.append('organizationMark', this.tempmes.organizationMark)
      await axios({
        url: requrl,
        method: 'POST',
        data: formData,
        timeout: 10000,
        headers: {
          'organizationMark': this.tempmes.organizationMark,
          'Content-Type': 'multipart/form-data'
        }
      }).then(
        res => {
          if (res.data.code === 1) {
            console.log(res)
            this.$store.dispatch("tagsView/delView", this.$route).then(() => {
              this.$message.success("新建大屏成功，即将跳转配置页面");
              setTimeout(() => {
                this.$router.push({ name: "specificConfiguration", query: this.tempmes });
              }, 1000);
            });
          }
        })
    },
    // 修改大屏
    editscreenMet() {
      this.$store.dispatch("tagsView/delView", this.$route).then(() => {
        this.$message.success("准备修改大屏，即将跳转配置页面");
        setTimeout(() => {
          this.$router.push({ name: "specificConfiguration", query: this.tempmes });
        }, 1000);
      });
    },
    getfarmtypemessage(e) {
      this.farmtypemessage = e;
    },
    setid(id) {
      this.nowselectid = id;
    },
    // 判断是否返回上一步选择基地
    goback() {
      let query = this.$route.query;
      if (query.templateCode) {
        this.tempmes = query;
        this.getallscreenlist()
      } else {
        this.$nextTick(() => {
          this.$store.dispatch("tagsView/delView", this.$route).then(() => {
            this.$message.error("无模板参数id");
            setTimeout(() => {
              this.$router.push({ name: "selectTemple" });
            }, 1000);
          });
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.farmtypemain-view {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .add-base-box {
    width: 300px;
    height: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    border: #009fa5 1px solid;
    background-color: #201616;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .selected-main-line2 {
      width: 300px;
      height: 25px;
      display: flex;
      justify-content: center;
      .selected-main-line2-but {
        width: 100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: rgb(32, 22, 22);
        border-radius: 5px;
        color: #00d5cd;
        border: 1px solid #00d5cd;
        font-size: 14px;
        letter-spacing: 2px;
      }
      .selected-main-line2-but:hover {
        background: #00d5cd;
        color: rgb(32, 22, 22);
      }
      .selected-main-line2-but:first-of-type {
        margin-right: 10px;
      }
    }
  }
  .base-box {
    width: 300px;
    height: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    background-image: url("../../../assets/index-bgc.png");
    background-size: cover;
    position: relative;
    border: #009fa5 1px solid;
    .base-box-title {
      width: 300px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.2);
      letter-spacing: 3px;
      white-space: nowrap;
    }
    .selected-main {
      width: 300px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.6);
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: #009fa5 1px solid;
      .selected-main-line1 {
        width: 300px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 3px;
        white-space: nowrap;
        font-size: 15px;
      }
      .selected-main-line2 {
        width: 300px;
        height: 25px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        .selected-main-line2-but {
          width: 100px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: rgb(32, 22, 22);
          border-radius: 5px;
          color: #00d5cd;
          border: 1px solid #00d5cd;
          font-size: 14px;
          letter-spacing: 2px;
        }
        .selected-main-line2-but:hover {
          background: #00d5cd;
          color: rgb(32, 22, 22);
        }
        .selected-main-line2-but:first-of-type {
          margin-right: 10px;
        }
      }
    }
  }
}
.add-screen-dia {
  width: 462px;
  // height: 191px;
  background: #303640;
  border: 1px solid #005c6f;
  border-radius: 7px;
  position: fixed;
  top: 35%;
  left: 40%;
  background-color: #005c6f;
  .top-bar {
    width: 460px;
    height: 10px;
    background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
    border-radius: 7px 7px 0px 0px;
  }
  .top-title-line {
    width: 450px;
    height: 24px;
    line-height: 24px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    .line-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 2px;
    }
    .line-close {
      color: #10d7c4;
      cursor: pointer;
    }
    .line-close:hover{
      color: #ffffff;
    }
  }
  .screen-dia-main {
    width: 462px;
    padding: 40px 10px;
    .dia-main-inputline {
      width: 442px;
      // background-color: #00FAAD;
      display: flex;
      justify-content: center;
      align-items: center;
      .inputline-name {
        width: 104px;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-align: center;
      }
      .inputline-value {
          width: 410px;
          height: 32px;
          box-sizing: border-box;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #494e57;
          box-sizing: border-box;
          outline:0;
        }
    }
  }
  .bottom-bar {
    width: 462px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    .bottom-bar-cancel {
      width: 96px;
      height: 33px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #0cb9ae;
      color: #0cb9ae;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-cancel:hover {
      color: #00faad;
    }
    .bottom-bar-confirm {
      width: 96px;
      height: 33px;
      background: #0cb9ae;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }
    .bottom-bar-confirm:hover {
      color: #10fab4;
    }
  }
}
</style>
